//采购计划
<template>
  <div class="">
    <div id="query">
      <label for="">标题: <input type="text" v-model="title" /></label>
      <label for="">计划进场时间: <input type="text" v-model="time" /></label>
      <label for=""
        >是否紧急:
        <el-select v-model="value" filterable placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option> </el-select
      ></label>
      <div>
        <label for="">所属项目: <input type="text" v-model="project" /></label>
        <label for="">创建人: <input type="text" v-model="founder" /></label>
        <label for=""
          >创建日期：

          <el-date-picker
            v-model="value1"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </label>
      </div>

      <div id="btn">
        <button id="first-btn" @click="query">查询</button>

        <button id="last-btn" @click="reset">重置</button>
      </div>
    </div>
    <div class="inputDeep">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="序号"> </el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="title" label="计划进场时间 "></el-table-column>
        <el-table-column prop="title" label="是否紧急"></el-table-column>
        <el-table-column prop="title" label="所属项目"></el-table-column>
        <el-table-column prop="founder" label="创建人"> </el-table-column>
        <el-table-column prop="data" label="创建日期"> </el-table-column>
        <el-table-column prop="operation" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="particulars(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="tian">
        <el-dialog
          title="材料采购计划详情"
          :visible.sync="dialogVisible"
          width="30%"
        >
          <div class="form">
            <label for="" class="title"> 标题：<input type="text" /></label
            ><br />
            <label for=""> 所属项目：<input type="text" /></label><br />
            <label for=""> 计划进场时间：<input type="text" /></label><br />
            <label for=""> 是否紧急：<input type="text" /></label><br />
            <label for=""> 创建人：<input type="text" /></label><br />
            <label for=""> 创建日期：<input type="text" /></label><br />
            <label for=""> 材料计划清单：<input type="text" /></label>
          </div>

          <div class="guang">
            <el-button @click="dialogVisible = false">关闭</el-button>
          </div>
        </el-dialog>
      </div>

      <div id="page">
        <el-pagination
          align="right"
          background
          layout="prev, pager, next"
          :total="total"
          style="margin-top: 30px"
             @current-change="newpage"
          :current-page="currentPage"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      pickerOptions: {
        onClick(picker) {
          picker.$emit("pick", new Date());
        },
      },
      options: [
        {
          value: "是",
        },
        {
          value: "否",
        },
      ],
      title: "",
      time: "",
      value: "",
      project: "",
      founder: "",
      value1: "",
      tableData: [
        {
          id: 1,
          title: "1",
          founder: "1",
          data: "111",
        },
      ],
      dialogVisible: false,
      total: 1,
      currentPage: 1,
    };
  },
  computed: {},
  watch: {},
  methods: {
    query() {},
    edit() {},
    delect() {},
    particulars() {
      this.dialogVisible = true;
    },
    reset() {
      this.title = "";
      this.time = "";
      this.founder = "";
      this.project = "";
      this.value = "";
      this.value1 = "";
      this.show();
    },
    //渲染
    show() {
      //接口不对
       this.$axios
        .post("http://47.100.30.12:8080/buy/findBuyMh", {
          data: {
            zhaoCaiBuyVo :10,
            currentPage: 1,
            pageSize: 10,
          },
        })
        .then((data) => {
          console.log(data);
          this.tableData=data.data.data
        });
    },
    //当前页
    newpage(index) {
      this.currentPage = index;
      this.show();
    },
  },
  created() {},
  mounted() {
    this.show();
  },
};
</script>
<style scoped>
label {
  margin-left: 20px;
}
input {
  margin-bottom: 20px;
  height: 25px;
}
#btn {
  margin: 20px 0;
  /* padding-left: 56px; */
}
button {
  height: 30px;
}
#last-btn {
  width: 60px;

  background-color: rgb(70, 167, 247);
  color: white;
  border: 1px rgb(70, 167, 247) solid;
}
#first-btn {
  width: 60px;
  background-color: transparent;
  border: 1px solid black;
  margin-right: 20px;
}
.inputDeep >>> .el-table .cell {
  padding: 0 0;
  text-align: center;
}
.inputDeep >>> .el-table .el-table__cell {
  padding: 5px 0;
}
.guang {
  text-align: center;
}
.form {
  margin-left: 30px;
}
.form input {
  border: 0;
  outline: none;
  width: 200px;
}
.form label {
  width: 100px;
  text-align: left;
}
</style>